<template>
  <van-cell v-for="team in userTeams" :key="team.id" @click="toTeamDetailPage(team)" center
            :title="team.teamName" :label="team.description || ''"
            class="team-cell">
    <template #icon>
      <van-image round src="https://bpic.588ku.com/element_origin_min_pic/19/03/07/1c1f8a60faf89fd97b0832baab0db608.jpg" width="50" height="50" style="margin-left: 10px; margin-right: 13px"/>
    </template>
    <template #label>
      <div class="team-description">
        <p class="ellipsis">{{ team.description || '' }}</p>
        <div class="team-info">
          <van-tag class="team-tag" type="primary" v-if="team.role === TeamMemberRole.ADMIN">创建者</van-tag>
          <van-tag class="team-tag" type="success" v-else-if="team.role === TeamMemberRole.MEMBER">成员</van-tag>
          <span class="team-members">{{ `${team.hasJoinNum || 0}/${team.maxNum}人` }}</span>
        </div>
      </div>
    </template>
    <template #right-icon>
      <div class="team-actions">
        <van-button size="small" type="success" icon="chat-o" text="聊天" @click.stop="toTeamChat(team)"/>
        <van-button v-if="team.role === TeamMemberRole.ADMIN" size="small" type="danger" text="解散团队" @click.stop="showDeleteTeamDialog(team)"/>
        <van-button v-if="team.role === TeamMemberRole.MEMBER" size="small" type="danger" text="退出团队" @click.stop="showExitTeamDialog(team)"/>
      </div>
    </template>
  </van-cell>

  <van-dialog v-model:show="showDelete" title="解散团队" show-cancel-button
              confirm-button-text="确认解散" cancel-button-text="取消"
              @confirm="deleteTeam">
    <p>确认要解散团队吗？该操作无法撤销！</p>
  </van-dialog>

  <van-dialog v-model:show="showExit" title="退出团队" show-cancel-button
              confirm-button-text="确认退出" cancel-button-text="取消"
              @confirm="exitTeam">
    <p>确认要退出团队吗？</p>
  </van-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { TeamType } from "../models/team";
import { showToast } from 'vant';
import { deleteTeamApi, exitTeamApi } from "../api/teamApi";
import { TeamMemberRole } from "../constants/enum";

const router = useRouter();

interface MyTeamCardListProps {
  userTeams: TeamType[];
}

defineProps<MyTeamCardListProps>();

const showDelete = ref(false);
const showExit = ref(false);
const currentTeam = ref<TeamType | null>(null);

const toTeamDetailPage = (team: TeamType) => {
  router.push({
    path: '/team/introduce',
    query: {
      teamName: team.teamName,
      description: team.description,
      expireTime: team.expireTime ? team.expireTime.toString() : '',
      maxNum: team.maxNum.toString(),
      status: team.status.toString(),
      createTime: team.createTime ? team.createTime.toString() : '',
      createUserName: team.createUser?.username || '',
      hasJoinNum: team.hasJoinNum?.toString() || '0',
    }
  });
};

const toTeamChat = (team: TeamType) => {
  router.push({
    path: '/chat',
    query: {
      teamId: team.id.toString(),
      teamName: team.teamName,
      teamType: '2', // 队伍聊天类型为2
    }
  });
};

const showDeleteTeamDialog = (team: TeamType) => {
  currentTeam.value = team;
  showDelete.value = true;
};

const showExitTeamDialog = (team: TeamType) => {
  currentTeam.value = team;
  showExit.value = true;
};

const deleteTeam = async () => {
  if (!currentTeam.value) return;
  
  try {
    const res = await deleteTeamApi(currentTeam.value.id);
    if (res?.code === 0) {
      showToast('解散团队成功');
      router.go(0);
    } else {
      showToast(res.description || '解散团队失败');
    }
  } catch (error) {
    showToast('解散团队失败');
    console.error('解散团队失败', error);
  }
};

const exitTeam = async () => {
  if (!currentTeam.value) return;
  
  try {
    const res = await exitTeamApi(currentTeam.value.id);
    if (res?.code === 0) {
      showToast('退出团队成功');
      router.go(0);
    } else {
      showToast(res.description || '退出团队失败');
    }
  } catch (error) {
    showToast('退出团队失败');
    console.error('退出团队失败', error);
  }
};
</script>

<style scoped>
.team-cell {
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.team-description {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ellipsis {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  margin-top: 4px;
}

.team-info {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.team-tag {
  margin-right: 8px;
}

.team-members {
  font-size: 12px;
  color: #999;
}

.team-actions {
  display: flex;
  gap: 8px;
}
</style>